<template>
  <label @click="handleClick" class="pt-checkbox" :class="{checked: value || isChecked}">
    <span class="btn" :style="[{
        borderRadius: borderRadius
      }]">
      <span
        v-if="$parent.$options._componentTag !== 'pt-checkbox-group'"
        v-show="value"
        class="pt-icon check"
      ></span>
      <span v-else v-show="isChecked" class="pt-icon check"></span>
    </span>
    <span v-if="$slots.default" class="label">
      <slot></slot>
    </span>
  </label>
</template>

<script>
export default {
  name: "ptCheckbox",
  props: {
    value: Boolean,
    label: String,
    borderRadius: {
      type: String,
      default: "2px"
    }
  },
  data () {
    return {
      isChecked: false
    };
  },
  methods: {
    handleClick (e) {
      if (this.$parent.$options._componentTag === "pt-checkbox-group") {
        this.$parent.checkboxClick(this.label);
      } else {
        this.$emit("input", !this.value);
      }
    }
  }
};
</script>

<style lang="less" scoped>
// 多选框
.pt-checkbox {
  display: inline-block;
  cursor: pointer;
  .btn {
    float: left;
    border: 1px solid @primary;
    border-radius: 2px;
    position: relative;
    width: 14px;
    height: 14px;
    position: relative;
    .pt-icon {
      position: absolute;
      font-size: 12px;
      color: @fColor4;
      left: -1px;
      top: 0px;
    }
  }
  .label {
    font-size: 14px;
    padding-left: 18px;
    display: block;
    color: @fColor1;
  }
  &.checked {
    .btn {
      background-color: @primary;
    }
  }
}
</style>